import React, { useEffect, useRef } from 'react';
import { DragDropContext, DropResult } from "react-beautiful-dnd";
import styled from '@emotion/styled';
import { Status } from './constant';
import Column from './Column';
import { ProjectProps, projects, Todo } from './assets';
import useImmer from "../../hooks/useImmer";
import { Button } from "antd";
import AddModal from './add';
import { getTaskList } from '../../api/modules/task';
const statusMap = {
    '1':Status.PENDING,
    '2':Status.DONE,
    '3':Status.BAKCLOG
};
const filterTodo = (todos:ProjectProps[], status:Status) : Todo[]=>{
    return todos.find(item=>statusMap[item.status as keyof typeof statusMap] === status)!.todos;
};
export default function App(){
    const [ state, setState ] = useImmer<ProjectProps[]>(projects);
    const addRef = useRef<any>(null);
    useEffect(()=>{
        getList();
    }, []);

    const getList = async ()=>{
        const { data, code } = await getTaskList() as {data:Todo[],code:number};

        setState((draft)=>{
            console.log('draft====>',draft)
            data.forEach(item=>{
                console.log('item====>',item)
                const target = draft.find(project=>project.status === item.taskStatus)
                console.log('target====>',target)
                target!.todos.push(item)
            })
        })
        console.log('state===>',state)
        if(code === 200){

        }
    };
    const onDragEnd = (result:DropResult)=>{
        const { destination, source } = result;
        if(!destination) return;
        if (
            destination.droppableId === source.droppableId &&
            destination.index === source.index
        ) {
            return;
        }
        setState((draft)=>{
            const sourceItem = draft.find(item=>statusMap[item.status as keyof typeof statusMap]=== source.droppableId)!.todos;
            const targetItem = draft.find(item=>statusMap[item.status as keyof typeof statusMap] === destination.droppableId)!.todos;
            const sourceClone = sourceItem[source.index];
            sourceItem.splice(source.index, 1);
            targetItem.splice(destination.index, 0, sourceClone);
        });
    };

    const handleAdd = ()=>{
        addRef.current!.showModal();
    };
    const handleEdit = (data:Todo)=>{
        addRef.current!.showModal(data);
    }
    return (
        <>
            <Header>
                <Button type="primary" onClick={handleAdd}>新建项目</Button>
                <AddModal ref={addRef} />
            </Header>
            <DragDropContext onDragEnd={onDragEnd} >
                <Container>
                    {
                        Object.values(Status).map((status=>(
                            <Column status={status} key={status} todos={filterTodo(state, status)} handleEdit={handleEdit}/>
                        )
                        ))
                    }
                </Container>
            </DragDropContext>
        </>

    );
}

const Container = styled.div`
  display: flex;
  justify-content: space-between;
  column-gap: 30px;
  overflow: hidden;
`;

const Header = styled.div`
  margin-bottom: 10px;
`;
